$icon: '.hx-navbar-toggler-icon';
//颜色
$toggler-icon-color: #5d5f77;
$toggler-icon-hover-color: #716aca;

.hx-navbar-toggler {
  position: absolute;
  left: 0.05rem;
  padding: 0.625rem 0.5rem;
  border: none;

  &.thin-toggler {
    &:hover {
      #{$icon} {
        background-color: $toggler-icon-hover-color;

        &::before,
        &::after {
          background-color: $toggler-icon-hover-color;
          width: 100%;
        }
      }
    }
  }
}

.hx-navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer;
}

#{$icon} {
  display: block;
  position: relative;
  min-height: 1px;
  border-radius: 0px;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
}

.thick-toggler {
  #{$icon} {
    width: 1.875rem;
    height: 0.3rem;
    background-color: $white;

    &::before,
    &::after {
      content: '';
      display: block;
      width: 1.875rem;
      height: 0.3rem;
      position: absolute;
      background: #FFF;
      -webkit-transition-property: margin, -webkit-transform;
      transition-property: margin, -webkit-transform;
      transition-property: margin, transform;
      transition-property: margin, transform, -webkit-transform;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
    }

    &::before {
      margin-top: -0.625rem;
    }

    &::after {
      margin-top: 0.625rem;
    }
  }
}

.thin-toggler {
  #{$icon} {
    width: 1.625rem;
    height: 2px;
    background-color: $toggler-icon-color;

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      // left: auto;
      // right: 0px;
      right: auto;
      left: 0;
      width: 100%;
      height: 2px;
      min-height: 1px;
      border-radius: 0px;
      transition: all .4s ease;
      -webkit-transition: all .4s ease;
      background-color: $toggler-icon-color;
    }

    &::before {
      width: 50%;
      margin-top: -0.5rem;
    }

    &::after {
      width: 75%;
      margin-top: 0.5rem;
    }
  }
}

//导航条合拢时*/
.hx-nav-collapse {
  .thin-toggler {
    #{$icon} {

      &::before,
      &::after {
        left: 0;
        right: auto;
      }
    }
  }

  .nav-link {
    text-align: center;
  }

  .navbar-brand,
  .hx-nav-text {
    display: none;
  }

  &.hx-aside {
    width: 4.25rem;
  }

  .hx-aside-menu {
    &:hover {
      width: 13.75rem;

      .hx-nav-text {
        display: initial;
      }
    }
  }
}

// //bootstrap面包屑导航
// .breadcrumb {
//   border-radius: unset;
// }

// .breadcrumb-item+.breadcrumb-item::before {
//   content: ">";
// }

// .breadcrumb-item {
//   color: #8c8ea4;

//   .active {
//     color: #716aca;
//   }
// }

// //侧边
// $aside: get-name(aside);
// $aside-fixed: get-name(aside-fixed);
// $aside-menu: get-name(aside-menu);
// $aside-brand: get-name(aside-brand);

// #{$aside-brand} {
//   padding-left: 1rem;
//   padding-right: 1rem;
//   height: $header-hight;
// }

// #{get-name(nav-text)} {
//   font-weight: 400;
//   font-size: 0.825em;
//   text-transform: initial;
// }

// #{$aside},
// #{$aside-fixed},
// #{$aside-menu} {
//   transition: all .5s ease;
//   -webkit-transition: all .5s ease;
// }

// #{$aside-menu} {
//   width: $width-100;
// }

// #{$aside},
// #{$aside-fixed} {
//   width: 13.75rem;
//   top: 0;
//   z-index: 1030;
//   height: $height-100;
// }

// #{$aside-fixed} {
//   position: fixed;
// }

// .nav-item {
//   &.active {
//     .nav-link {
//       color: #716aca;
//     }
//   }

//   &:not(.active):hover {
//     transition: background-color 0.3s;
//     -webkit-transition: background-color 0.3s;
//     background-color: $dark;

//     .nav-link {
//       color: #716aca;
//     }
//   }
// }

// .nav-link {
//   color: #8c8ea4;
// }